<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="nav">
      <div @click="backClick()" class="nav-icon1">
        <van-icon name="arrow-left" size="2rem" />
      </div>
      <div class="nav-text">
        <div class="nav-text1">商品</div>
        <div class="nav-text2">评论</div>
      </div>
      <div class="nav-icon1 nav-icon2">
        <van-icon name="share-o" size="2rem" />
      </div>
      <div class="nav-icon1 nav-icon2">
        <van-icon name="ellipsis" size="2rem" />
      </div>
    </div>
    <!-- 商品轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="advert-img" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品详细信息 -->
    <div class="good-msg">
      <!-- 商品介绍 -->
      <div class="good-name">{{goodName}}</div>
      <!-- 价格对比 -->
      <div class="good-price">
        <div class="now-price">￥{{this.$route.query.nowPrice}}</div>
        <div class="old-price">
          原价：
          <span class="old-text">￥{{this.$route.query.old}}</span>
        </div>
      </div>
      <!-- 包邮销量 -->
      <div class="tran-mode">
        <div>全场包邮（偏远地区除外）</div>
        <div>月销量{{1175}}件</div>
      </div>
      <!-- 客户服务 -->
      <div class="customer">
        <div class="customer-item" v-for="(item,index) in service" :key="index">
          <img class="customer-img" :src="item.url" />
          <div>{{item.name}}</div>
        </div>
        <div @click="custClick()" class="customer-icon">
          <van-icon name="arrow" color="gray" />
        </div>
      </div>
      <!-- 收货地址 -->
      <div class="location">
        <div>送至</div>
        <div>
          <div></div>
          <div>现在付款，7小时内为你发货</div>
        </div>
        <div>
          <van-icon name="arrow" color="gray" />
        </div>
      </div>
      <!-- 型号选择 -->
      <div class="choice-style">
        <div class="choice-text">型号</div>
        <div @click="seclectType()">
          请选择
          <van-icon name="arrow" color="gray" />
        </div>
        <!-- 拉起型号选择 -->
        <van-popup class="select-popup" v-model="show" position="bottom">
          <div>
            <!-- 型号选择  -->
            <div class="type-name">型号</div>
            <div class="type-item">
              <div
                @click="selectClick(index)"
                class="type-item1"
                v-for="(item,index) in typeArr"
                :key="index"
              >
                <div>{{item}}</div>
              </div>
            </div>
            <!-- 其他类型选择 -->
            <div class="type-name">其他</div>
            <div class="type-item">
              <div class="type-item1" v-for="(item,index) in specArr" :key="index">
                <div>{{item}}</div>
              </div>
            </div>
            <!-- 购买数量选择 -->
            <div class="type-name">购买数量</div>
            <div>
              <button class="good-num" :disabled="dis" @click="minus()">-</button>
              <input class="good-count" v-model="counts" type="text" value="0" />
              <button class="good-num" @click="add()">+</button>
            </div>
          </div>
          <!-- 加入购物车按钮 -->
          <div class="cart-btn">
            <van-button @click="cartBtn()" type="warning">加入购物车</van-button>
          </div>
        </van-popup>
      </div>
    </div>
    <!-- 商品评论 -->
    <div class="content-commodity">
      <div class="commodity">
        <div class="remark">
          商品点评
          <span class="font-color">({{num}}条)</span>
        </div>
        <div class="row">
          <span @click="Comment()">查看全部</span>
          <van-icon name="arrow" color="gray" />
        </div>
      </div>
      <div class="comment-content" v-for="(item,index) in commentList" :key="index">
        <div class="tilte-head">
          <div class="headerImg">
            <img src="static/img/gj.png" alt />
          </div>
          <span>{{item.id}}</span>
        </div>
        <div class="comment-font">
          <span>{{item.content}}</span>
        </div>
        <div class="comment-img">
          <img :src="item.picture" alt />
        </div>
        <div class="comment-end">
          <span>型号: {{item.product.model}}</span>
          <span>{{format(item.publishTime)}}</span>
        </div>
        <br />
        <br />
      </div>
    </div>
    <!-- 提交订单 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon @click="cart()" icon="cart-o" text="购物车" />
      <van-goods-action-button @click="addCart()" type="warning" text="加入购物车" />
    </van-goods-action>
  </div>
</template>
<script>
import axios from 'axios';
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  data() {
    return {
      goodIndex: 0,
      dis: false,
      counts: 1,
      goodName: '',
      specArr: [],
      typeArr: [],
      show: false,
      goodInfor: [],
      images: [],
      service: [
        { url: 'static/shop-img/goodDetail/affirm.png', name: '保证正品' },
        { url: 'static/shop-img/goodDetail/affirm.png', name: '假一赔五' },
        { url: 'static/shop-img/goodDetail/affirm.png', name: '8天无理由退货' }
      ],
      commentList: [],
      num: 0
    };
  },

  mounted() {
    // console.log('商品ID', this.$route.query.cardId);
    console.log('aa', this.$route.query.id);
    axios({
      method: 'post',
      url: 'api/productDetail/' + this.$route.query.id
    }).then(res => {
      console.log('数据详情', res);
      this.goodInfor = res.data.data;
      this.goodName = res.data.data.product.name;
      // console.log('全部数据',this.goodInfor)
      let imgUrl = res.data.data.bannerPic;
      this.images = imgUrl.split(',');
      // console.log(this.images);
      let selectType = res.data.data.modelStr;
      this.typeArr = selectType.split(',');
      // console.log(this.typeArr);
      if (res.data.data.product.spec !== null) {
        let specString = res.data.data.product.spec;
        this.specArr = specString.split(',');
      } else {
        this.specArr = null;
      }
    });
    // 获取商品评论的请求
    // axios
    //   .post(
    //     'api/ProductComment/Select',
    //     {},
    //     {
    //       params: {
    //         productNum: '1',
    //         kind: 1
    //       }
    //     }
    //   )
    //   .then(res => {
    //     this.commentList=res.data.data;
    //     this.num=this.commentList.length;
    //     console.log(this.commentList);
    //   });
  },

  methods: {
    // 型号选择中的加入购物车
    cartBtn() {
      console.log(
        this.specArr,
        this.typeArr[this.goodIndex],
        this.$route.query.id,
        this.counts
      );
      axios
        .post(
          '/api/addShopCart',
          {},
          {
            params: {
              spec: this.specArr,
              model: this.typeArr[this.goodIndex],
              productNum: this.$route.query.id,
              userNum: '02d2b3be-1295-481c-ba67-b82a30080135',
              count: this.counts
            }
          }
        )
        .then(res => {});
      this.counts = 1;
      this.show = false;
    },
    // 型号选择事件
    selectClick(index) {
      console.log(index);
      this.goodIndex = index;
    },
    minus() {
      if (this.counts <= 0) {
        this.dis = true;
      } else {
        this.counts = parseInt(this.counts) - 1;
      }
    },
    add() {
      this.counts = parseInt(this.counts) + 1;
      this.dis = false;
    },
    seclectType() {
      console.log('选择按钮', this.show);
      this.show = true;
      console.log();
    },
    onAddCartClicked() {},
    addCart() {
      this.show = true;
    },
    format(s) {
      //将后台传过来的valueOf格式的时间改成yyyy/m/d的格式
      const date = new Date(s),
        y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate();
      return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`;
    },
    cart() {
      this.$router.push({
        name: '购物车',
        query: {
          Num: this.$route.query.id
        }
      });
    },
    Comment() {
      this.$router.push({
        name: '评论详情',
        query: {
          name: '商品详情'
        }
      });
    },
    backClick() {
      if (window.history.length <= 1) {
        this.$router.push({ path: '/' });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    custClick() {
      this.$router.push({
        name: '客服'
      });
    }
  }
};
</script>
<style scoped>
.nav {
  position: sticky;
  top: 0;
  display: flex;
  height: 5rem;
  background-color: white;
  opacity: 0.5;
  z-index: 5;
}
.nav-icon1 {
  display: flex;
  align-items: center;
}
.nav-icon2 {
  margin-left: 1.5rem;
}
.nav-text {
  display: flex;
  font-size: 1.5rem;
  font-weight: bolder;
  width: 25rem;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 2rem;
}
.advert-img {
  width: 37.5rem;
  height: 40rem;
}
.good-msg {
  /* border: 0.1rem black solid; */
  height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.good-price {
  display: flex;
}
.tran-mode {
  display: flex;
}
.customer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 1rem;
  background-color: rgb(243, 241, 241);
  border-bottom: rgb(218, 215, 215) solid 1rem;
}
.customer-item {
  display: flex;
  margin-right: 2rem;
}
.customer-img {
  width: 1.5rem;
}
.customer-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem;
}
.choice-style {
  border-top: 1rem solid rgb(218, 215, 215);
  border-bottom: 1rem solid rgb(218, 215, 215);
  display: flex;
  justify-content: space-between;
  padding: 1rem 1rem;
}
.choice-text {
  font-size: 1.5rem;
  /* margin-left: 2rem; */
}
.good-name {
  margin-left: 2rem;
  font-size: 1.8rem;
}
.now-price {
  color: orangered;
  font-size: 2rem;
  font-weight: bolder;
}
.old-text {
  text-decoration-line: line-through;
}
.old-price {
  margin-left: 3rem;
  display: flex;
  align-items: center;
}
.select-popup {
  width: 100%;
  height: 30rem;
}
.type-item {
  display: flex;
  justify-content: space-evenly;
  font-size: 1.5rem;
}
.type-name {
  font-size: 2rem;
  margin: 1rem;
}
.type-item1 {
  text-align: center;
  background-color: rgb(241, 236, 236);
  width: 15rem;
}
.good-count {
  text-align: center;
  width: 3rem;
  height: 3rem;
  margin-top: 1rem;
}
.good-num {
  width: 3rem;
  height: 3rem;
  margin-top: 1rem;
}
.cart-btn {
  width: 20rem;
  margin-top: 1rem;
}
.content-commodity {
  overflow: hidden;
  height: 850px;
}
.commodity {
  width: 100%;
  height: 4rem;
  display: flex;
  font-size: 1.5rem;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid gainsboro;
  padding-bottom: 0.6rem;
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* float: right; */
  position: relative;
  left: 19rem;
}
.font-color {
  color: gray;
}
.remark {
  position: relative;
  left: 1rem;
}
.headerImg {
  width: 2rem;
  height: 2rem;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  overflow: hidden;
}
.headerImg img {
  width: 100%;
  height: 100%;
}
.tilte-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.5rem;
  color: orange;
  position: relative;
  left: 1rem;
  height: 4rem;
}
.tilte-head span {
  position: relative;
  left: 1rem;
}
.comment-img {
  display: flex;
  flex-direction: row;
  /* justify-content: space-around; */
  width: 95%;
  margin: 0 auto;
}
.comment-img img {
  position: relative;
  top: 1rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid gray;
  border-radius: 0.3rem;
  margin-left: 0.6rem;
}
.comment-font {
  width: 94%;
  margin: 0 auto;
  font-size: 1.5rem;
}
.comment-end {
  font-size: 1.3rem;
  width: 94%;
  margin: 0 auto;
  color: gray;
  position: relative;
  top: 2rem;
}
.comment-end :nth-last-child(1) {
  float: right;
}
.comment-content {
  border-bottom: 1px solid gainsboro;
  /* height: 25rem; */
}
</style>